import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import Details from './details';

export default class Message extends Component {
  state = {
    data: [
      {
        id: '001',
        title: '消息1',
      },
      {
        id: '002',
        title: '消息2',
      },
      {
        id: '003',
        title: '消息3',
      },
    ],
  };
  render() {
    return (
      <ul>
        {this.state.data.map((msg) => {
          return (
            <li key={msg.id}>
              {/* props 传参 */}
              {/* <Link to={`/home/message/detail/${msg.id}/${msg.title}`}>{msg.title}</Link>&nbsp;&nbsp; */}

              {/* search 传参, 和 query 传参一样， 只是参数是放在 location.search中 所以才说 search 传参 */}
              {/* <Link to={`/home/message/detail/?id=${msg.id}&title=${msg.title}`}>{msg.title}</Link>&nbsp;&nbsp; */}

              {/* state 传参, 是在 url路径栏里面看不到的 */}
              <Link to={{pathname: '/home/message/detail', state: {id: msg.id, title: msg.title}}}>{msg.title}</Link>&nbsp;&nbsp;
            </li>
          );
        })}
        <Switch>
          {/* props 声明参数 */}
          {/* <Route path={`/home/message/detail/:id/:title`} component={Details}/>  */}

          {/* search 声明， search 无需声明参数 */}
          {/* <Route path={`/home/message/detail`} component={Details}/>  */}
          
          {/* state 声明，state 无需声明参数，会自动保存在 location.state 中， state 刚进来数据还不会存进 history 中 */}
          <Route path={`/home/message/detail`} component={Details}/>
        </Switch>
      </ul>
    );
  }
}
